<mat-card class="page-title">
    <span>开放能力</span>

    <div class="btn-toolbar float-right" role="toolbar" id="divDesktop">
        <button mat-icon-button (click)="refresh()" matTooltip="刷新">
            <mat-icon color="primary">refresh</mat-icon>
        </button>
        <span>&nbsp;&nbsp;</span>
        <input name="search" type="text" class="form-control" placeholder="全文搜索" [(ngModel)]="filter"
               (blur)="refresh()" style="width:200px">

        <span>&nbsp;&nbsp;</span>
    </div>
</mat-card>

<mat-card>
    <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="predicate" (change)="refresh()" style="height: 36px">
        <mat-button-toggle value="displayOrder" align="center">
            默认
        </mat-button-toggle>
        <mat-button-toggle value="id" align="center">
            最新
        </mat-button-toggle>
        <mat-button-toggle value="callCount" align="center">
            最热
        </mat-button-toggle>
    </mat-button-toggle-group>
    <div class="row">
        <div *ngFor="let ability of abilities; trackBy: trackIdentity">
            <mat-card class="solution-card pull-right">
                <mat-card-header class="solution-card-header">
                    <mat-card-title class="solution-card-title">
                        <a (click)="viewSolution(ability.solutionUuid)" matTooltip="查看模型">{{ability.solutionName}}</a>
                    </mat-card-title>
                    <mat-card-subtitle>
                        <span>{{ability.solutionCompany || ability.solutionAuthor}}</span>
                        <div class="pull-right">
                            <span>{{ability.callCount}}</span>
                        </div>
                    </mat-card-subtitle>
                </mat-card-header>
                <div class="solution-card-image">
                    <a (click)="viewAbility(ability)">
                        <img mat-card-image src="{{ability.pictureUrl}}" *ngIf="ability.pictureUrl">
                        <img mat-card-image src="../../../content/images/solution/default.jpg" *ngIf="!ability.pictureUrl">
                    </a>
                </div>
                <mat-card-content class="solution-card-content float-right">
                    <span>{{ability.deployer}}|{{ability.createdDate | date:'yy-MM-dd'}}部署</span>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
    <br>
    <div>
        <mat-paginator #paginator
                       [length]="totalItems"
                       [pageSize]="itemsPerPage"
                       [pageSizeOptions]="pageSizeOptions"
                       (page)="reloadPage($event)"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</mat-card>
